<template>
  <div class="home-container">
    <van-nav-bar title="明日头条" fixed />
    <!-- 导入注册并使用ArticleInfo组件 -->
    <!-- 在使用组件的时候，如果某个属性名为小驼峰形式，则绑定属性时，建议改写成"连字符"格式 -->
    <!-- 例如：comCount => com-count -->
    <!-- 外面再包一层，配合PullRefresh 组件实现下拉刷新 -->
    <van-pull-refresh v-model="refreshing" :disabled="finished" @refresh="onRefresh">
      <!-- 使用van-list列表组件把文章组件包裹起来，实现上拉加载 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- 循环生成ArticleInfo组件 -->
        <ArticleInfo
          v-for="item in artList"
          :key="item.id"
          :title="item.title"
          :author="item.aut_name"
          :com-count="item.comm_count"
          :pubdate="item.pubdate"
          :cover="item.cover"
        ></ArticleInfo>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 按需导入封装的API接口
import { getArticleListAPI } from '@/api/articleAPI.js'

// 导入子组件
import ArticleInfo from '@/components/Article/ArticleInfo.vue'

export default {
  name: 'Home',
  components: {
    ArticleInfo
  },
  data() {
    return {
      // 加载文章列表的页码
      page: 1,
      // 每页加载文章的数量
      limit: 10,
      // 文章列表
      artList: [],
      // 是否正在加载数据的状态，如果是true，则触发onload事件
      // 需要加载列表时将其设置为true，每次加载数据请求回来之后，需要置为false
      loading: true,
      // 所有数据是否加载完毕的状态，没有更多数据了，需要设置为true，此时会展示finish-text
      finished: false,
      // 下拉刷新的状态
      refreshing: true
    }
  },
  created() {
    this.initArticaleList()
  },
  methods: {
    // 获取文章列表数据
    async initArticaleList(isRefresh) {
      const { data: res } = await getArticleListAPI(this.page, this.limit)
      if (isRefresh) {
        // 如果是下拉刷新，将新数据拼接到原数据头部
        this.artList = [...res, ...this.artList]
        this.refreshing = false
      } else {
        // 上拉加载更多数据，应该在原数据的后面拼接新数据
        this.artList = [...this.artList, ...res]
        this.loading = false
      }
      // 如果没有更多数据了，把finished状态设置为true
      if (!res.length) {
        this.finished = true
      }
    },
    // 上拉加载触发此方法，注意这个方法一进来就会触发，下拉刷新将新数据添加到原数据尾部
    // 所以将loading的初始值设置为true，第一次就不执行，然后在获取文章列表请求数据回来之后改为false
    onLoad() {
      // 1. 当前页码值+1
      this.page++
      // 2. 调方法获取下一页数据
      this.initArticaleList()
    },
    // 下拉刷新的方法，和上拉加载一样的步骤，只是最后更新数据效果不一样，将数据添加到原数据头部
    onRefresh() {
      // 1. 当前页码值+1
      this.page++
      // 2. 调方法获取下一页数据，并且需要传入一个参数，值为true，表示操作为下拉刷新
      this.initArticaleList(true)
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding-top: 46px;
  padding-bottom: 50px;
}
</style>
